<script setup>
import MainTopToolbar from "@/components/toolbar/MainTopToolbar.vue";
import { useThemeStore } from "@/stores/themeStore";
import { storeToRefs } from "pinia";
import LoginModal from "@/components/login/LoginModal.vue";

const themeStore = useThemeStore();
const { theme } = storeToRefs(themeStore);
</script>
<template>
  <n-config-provider :theme="theme.name">
    <n-loading-bar-provider>
      <n-message-provider>
        <n-layout position="absolute">
          <!-- 定义头 -->
          <n-layout-header borderd style="height: 64px; padding: 0 20px">
            <main-top-toolbar />
          </n-layout-header>
          <n-layout position="absolute" style="top: 64px" has-sider>
            <!-- 左侧应用栏 -->
            <n-layout-sider
              width="64px"
              borderd
              content-style="padding: 24px 0; text-align:center"
            >
              海淀桥
            </n-layout-sider>
            <!-- 主页面 -->
            <n-layout-content content-style="padding: 24px;">
              平山道
            </n-layout-content>
          </n-layout>
        </n-layout>
        <!--    登录模态框-->
        <login-modal />
      </n-message-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>
